<template>
    <div class="container">
        <div style="display: flex;">
            <div style="padding-right: 10px;cursor: pointer;" @click="handleReturn"><el-icon>
                    <ArrowLeftBold style="margin-top: 18px;" />
                </el-icon></div>
            <div class="title mb-4">质量检验重复清单</div>
        </div>
        <!-- 查询表单区域 -->
        <div class="border-bottom">
            <el-form :model="formModel" ref="queryForm" label-width="100px" label-position="right">
                <el-row :gutter="20">
                    <el-col :span="6">
                        <el-form-item label="日期" prop="date">
                            <xcmg-input v-model="formModel.date" placeholder="选择日期" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="原物料编码" prop="originalMaterialCode">
                            <xcmg-input v-model="formModel.originalMaterialCode" placeholder="请输入原物料编码" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item class="form-action" label-width="0">
                            <xcmg-button stoke @click="handleSearch">查询</xcmg-button>
                            <xcmg-button @click="resetForm" class="action-button-spacer">重置</xcmg-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>

        <!-- 操作按钮区域 -->
        <div class="button-group">
            <xcmg-button @click="handleDerive">
                <svg-icon name="upload-line" />
                <div class="spacer"></div>
                导出
            </xcmg-button>
        </div>

        <!-- 数据表格区域 -->
        <div class="table-container">
            <xcmg-table :data="tableData" v-loading="loading" height="100%" style="width: 100%" border>
                <el-table-column type="index" label="序号" width="60" align="center" />
                <el-table-column prop="originalMaterialCode" label="原物料编码" min-width="100" show-overflow-tooltip />
                <el-table-column prop="duplicateMaterialCode" label="重复物料编码" min-width="100" show-overflow-tooltip />
                <el-table-column prop="materialDescription" label="物料描述" width="100" show-overflow-tooltip />
                <el-table-column prop="materialName" label="物料名称" min-width="100" show-overflow-tooltip />
                <el-table-column prop="designCategory" label="设计分类" min-width="100" show-overflow-tooltip />
                <el-table-column prop="materialType" label="物料类型" min-width="100" show-overflow-tooltip />
                <el-table-column prop="materialCategory" label="物料大类" min-width="100" show-overflow-tooltip />
            </xcmg-table>
        </div>

        <div class="fixed-pagination">
            <xcmg-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
                :page-sizes="[10, 50, 100, 200, 500]" :total="total" background
                layout="total,sizes,prev, pager, next,jumper" @size-change="handleSizeChange"
                @current-change="handleCurrentChange" />
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router' // 引入路由
import { SvgIcon } from 'xcmg-components'
import { ArrowLeftBold } from '@element-plus/icons-vue'

const router = useRouter() // 获取路由实例
const loading = ref(false)

const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)

const formModel = reactive({
    date: '',
    originalMaterialCode: '',
})

const tableData = ref<any[]>([])

// 分页变化处理
const handleSizeChange = (size: number) => {
    pageSize.value = size
    fetchTableData()
}

const handleCurrentChange = (page: number) => {
    currentPage.value = page
    fetchTableData()
}

// 返回上一页
const handleReturn = () => {
    router.go(-1) // 返回上一页路由
}

// 模拟生成测试数据
const generateMockData = () => {
    const mockData = []
    const materialTypes = ['电子元件', '金属材料', '塑料制品', '化工原料', '机械零件']
    const designCategories = ['A类', 'B类', 'C类', 'D类', 'E类']
    const materialCategories = ['原材料', '半成品', '成品', '辅料', '包装材料']

    for (let i = 0; i < 50; i++) {
        const typeIndex = i % materialTypes.length
        const categoryIndex = i % designCategories.length
        const materialCategoryIndex = i % materialCategories.length

        mockData.push({
            originalMaterialCode: `MAT-${1000 + i}`,
            duplicateMaterialCode: `MAT-${2000 + i}`,
            materialDescription: `物料描述内容${i + 1}`,
            materialName: `物料${i + 1}`,
            designCategory: designCategories[categoryIndex],
            materialType: materialTypes[typeIndex],
            materialCategory: materialCategories[materialCategoryIndex]
        })
    }
    return mockData
}

// 获取表格数据
const fetchTableData = async () => {
    try {
        loading.value = true
        // 模拟API请求延迟
        await new Promise(resolve => setTimeout(resolve, 500))
        // 使用模拟数据
        tableData.value = generateMockData()
    } catch (error) {
        console.error('获取数据失败:', error)
    } finally {
        loading.value = false
    }
}

// 查询处理
const handleSearch = () => {
    fetchTableData()
}

// 重置表单
const resetForm = () => {
    formModel.date = ''
    formModel.originalMaterialCode = ''
    fetchTableData()
}

// 导出处理
const handleDerive = () => {
    console.log('导出数据', tableData.value)
    // 这里可以添加实际的导出逻辑
}

// 初始化数据
onMounted(() => {
    fetchTableData()
})
</script>

<style scoped>
.container {
  padding: 20px;
  height: calc(100vh - 64px - 56px - 40px);
  display: flex;
  flex-direction: column;
}

.title {
  font-weight: bold;
  font-size: 20px;
}

.mb-4 {
  margin-bottom: 16px;
}

.border-bottom {
  border-bottom: 1px solid #e5e7eb;
}

.button-group {
  padding: 16px 0;
  display: flex;
  gap: 12px;
}

.spacer {
  width: 8px;
}

/* 表格容器：占据剩余空间 */
.table-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
/* 表格：允许滚动，限制最大高度 */

.fixed-pagination {
  position: sticky;
  bottom: 0;
  background: #fff;
  padding-top: 20px;
  display: flex;
  justify-content: flex-end;
  z-index: 1;
}

:deep(.el-form-item__content) {
    justify-content: flex-end;
}
</style>